<!--
 * @Author: licongwei
 * @Date: 2022-03-12 11:45:31
 * @FileDescription: 用户登录
-->
<template>
  <div class="login">
    <i class="user-icon"></i>
    <p class="name">管理员</p>
    <a href="/" class="quit-icon"></a>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'login',
  components: {},
  setup() {
    // TODO:后续考虑添加token验证和路由守卫
    return {}
  }
})
</script>
<style lang="less" scoped>
.login {
  position: absolute;
  top: 16px;
  left: 1755px;
  display: flex;
  align-items: center;
  .user-icon {
    width: 26px;
    height: 26px;
    background: url('../img/icon-user.png') no-repeat;
    background-size: 100% 100%;
  }
  .name {
    font-size: 18px;
    font-family: 'AliHYAiHei';
    color: #31aaff;
    margin: 0 10px;
  }
  .quit-icon {
    width: 26px;
    height: 26px;
    background: url('../img/icon-quit.png') no-repeat;
    background-size: 100% 100%;
    cursor: pointer;
    transition: transform 0.2s;
    &:hover {
      transform: scale(0.9);
    }
  }
}
</style>
